<style>
.ivu-tabs-bar {
  margin-bottom: 0;
}
</style>

<template>
  <div>
    <Modal
      v-model="IsModalShow"
      :title="modalType==1?'编辑车辆':'新增车辆'"
      :mask-closable="false"
      @on-cancel="cancel"
      width="600"
    >
      <Form
        ref="modalForm"
        :model="modalForm"
        :label-width="130"
        value="true"
        style="padding: 10px 15px"
      >
        <Form-item
          label="车牌号"
          prop="plateNum"
          :rules="{required: true, message: '必填,1-50位字符',min:1,max:50,  trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.plateNum" maxlength="50"></Input>
        </Form-item>

        <Form-item
          label="车牌颜色"
          prop="plateColor"
          :rules="{required: true, message: '必选',  trigger:'change',type:'number'}"
        >
          <Select v-model="modalForm.plateColor" :transfer="true">
            <Option
              v-for="item in plateColorSelect"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Form-item>

        <Form-item
          label="车辆类型"
          prop="carType"
          :rules="{required: true, message: '必选',  trigger:'change',type:'number'}"
        >
          <Select v-model="modalForm.carType" :transfer="true">
            <Option
              v-for="item in carTypeSelect"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </Form-item>

        <Form-item
          label="车辆品牌"
          prop="carBrand"
          :rules="{required: true, message: '必填,1-50位字符',min:1,max:50,  trigger:'blur',type:'string'}"
        >
          <Input v-model="modalForm.carBrand" maxlength="50"></Input>
        </Form-item>

        <Form-item label="车辆备注">
          <Input v-model="modalForm.remark" maxlength="50" type="textarea"></Input>
        </Form-item>
        <Form-item label="车辆照片">
          <upload-pic-card
            uploadFileUrl="/bss/image/upload"
            cardName="上传车辆照片"
            :upload="modalForm.carPic"
            @on-change="carPicChange"
          ></upload-pic-card>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="default" @click="cancel">关闭</Button>
        <Button type="primary" :loading="submitLoading" @click="saveForm('modalForm')">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { plateColorSelect, carTypeSelect } from "@/libs/dict";
import { getDeptCascader } from "@/api/index";
import { addCar, editCar } from "@/api/operate";
import uploadPicCard from "../../my-components/xboot/upload-pic-card";

export default {
  props: {
    parentForm: {
      type: Object,
      default: function() {
        return {};
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    },
    modalType: {
      type: Number,
      default: 0
    },
    deviceTypes: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  components: {
    uploadPicCard
  },
  data() {
    return {
      IsModalShow: false,
      modalForm: {},
      deptCasc: [],
      deviceTypeSelect: [],
      plateColorSelect: plateColorSelect,
      carTypeSelect: carTypeSelect,

      submitLoading: false
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.IsModalShow = curVal;
      if (curVal) {
        this.modalForm = Object.assign(this.parentForm);
        this.deviceTypeSelect = Object.assign(this.deviceTypes);
      }
    }
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    cancel() {
      this.$emit("listenModalForm");
    },
    init() {
      this.getDeptCascList();
    },
    getDeptCascList() {
      getDeptCascader().then(res => {
        if (res.code == 0) {
          this.deptCasc = res.data;
        }
      });
    },

    carPicChange(v) {
      this.modalForm.carPic = v;
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.submitLoading = true;
          let params = JSON.parse(JSON.stringify(this.modalForm));
          if (this.modalType == 0) {
            addCar(params).then(res => {
              this.submitLoading = false;
              if (res.code == 0) {
                this.$Message.success("操作成功");
                this.$emit("refreshTableList");
                this.$emit("listenModalForm");
              } else {
                this.$Message.error(res.msg);
              }
            });
          } else {
            // 编辑
            editCar(params).then(res => {
              this.submitLoading = false;
              if (res.code == 0) {
                this.$Message.success("操作成功");
                this.$emit("refreshTableList");
                this.$emit("listenModalForm");
              } else {
                this.$Message.error(res.msg);
              }
            });
          }
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
